<template>
  <view class="withdrawal-page">
    <!-- 顶部导航栏 -->
    <view class="header">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view class="title">申请提现</view>
		<view class="back-btn" style="opacity: 0;">
			<view class="back-icon"></view>
		</view>
    </view>
    
    <!-- 账户余额卡片 -->
    <view class="card">
      <view class="balance-row">
        <text class="balance-label">账户余额</text>
        <text class="balance-amount">{{balance}} 元</text>
      </view>
      
      <!-- 提现表单 -->
      <view class="form-group">
        <text class="form-label">提现金额</text>
        <input class="form-input" type="text" placeholder="" v-model="withdrawAmount"/>
        <text class="currency-unit">元</text>
      </view>
      
      <view class="form-group">
        <text class="form-label">真实姓名</text>
        <input class="form-input" type="text" placeholder="" v-model="realName"/>
      </view>
      
      <!-- <view class="form-group">
        <text class="form-label">请选择银行</text>
        <view class="dropdown-input">
          <text class="placeholder">请选择银行</text>
          <text class="dropdown-icon">&#xe6eb;</text>
        </view>
      </view> -->
      
      <view class="form-group">
        <text class="form-label">请输入银行卡号</text>
        <input class="form-input card-input" type="text" placeholder="" v-model="bankCardNumber"/>
      </view>
      
      <view class="disclaimer">
        <text>车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写</text>
      </view>
      
      <view class="submit-btn">
        <text @click="submitWithdrawal()">确认信息并提交</text>
      </view>
    </view>
    
    <!-- 提现记录 -->
    <view class="history-section">
      <view class="history-title">
        <text>提现记录</text>
      </view>
      
      <!-- 记录项目 -->
      <view v-for="(item, index) in withdrawalHistory" :key="index">
        <view class="history-item">
          <view class="item-info">
            <text class="item-title">商家提现申请</text>
            <text class="item-amount">{{item.status === 2 ? '+' : '-'}} {{item.amount.toFixed(2)}}</text>
          </view>
          <view class="item-details">
            <text class="item-date">提现时间:{{item.date}}</text>
            <text class="item-status" :class="{
              'status-pending': item.status === 0,
              'status-approved': item.status === 1,
              'status-rejected': item.status === 2
            }">{{item.status === 0 ? '审核中' : item.status === 1 ? '提现成功' : '提现失败'}}</text>
          </view>
        </view>
        <view class="divider" v-if="index < withdrawalHistory.length - 1"></view>
      </view>
    </view>
  </view>
</template>

<script>
	import request from '../../../../utils/request'
export default {
  data() {
    return {
      balance: 1500.00,
      withdrawAmount: '',
      realName: '',
      selectedBank: '',
      bankCardNumber: '',
	  userInfo:{},
      withdrawalHistory: [
        {
          amount: 100.00,
          date: '2022-10-12 11:09',
          status: 0
        },
        {
          amount: 100.00,
          date: '2022-10-12 11:09',
          status: 1
        },
        {
          amount: 100.00,
          date: '2022-10-12 11:09',
          status: 2
        }
      ]
    }
  },
  methods: {
    submitWithdrawal() {
      // 表单验证
      if (!this.withdrawAmount) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        })
        return
      }
      
      if (!this.realName) {
        uni.showToast({
          title: '请输入真实姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.bankCardNumber) {
        uni.showToast({
          title: '请输入银行卡号',
          icon: 'none'
        })
        return
      }

      // 验证提现金额是否超过余额
      const amount = parseFloat(this.withdrawAmount)
      if (isNaN(amount) || amount <= 0) {
        uni.showToast({
          title: '请输入有效的提现金额',
          icon: 'none'
        })
        return
      }

      if (amount > this.balance) {
        uni.showToast({
          title: '余额不足',
          icon: 'none'
        })
        return
      }

      // 提交提现申请
      const that = this
      request({
        url: 'notice/fyMoneyLog/withdrawal',
        method: 'POST',
        data: {
          merchant_id: that.userInfo.mid,
          cash_withdrawal: amount,
          real_name: that.realName,
          bank_card_number: that.bankCardNumber
        },
        success(res) {
          const result = res.data
          if (result.code == 200) {
            uni.showToast({
              title: '提现申请已提交',
              icon: 'success'
            })
            // 刷新余额和提现记录
            that.getBalance()
            that.getWithdrawalHistory()
          } else {
            uni.showToast({
              title: result.msg || '提交失败',
              icon: 'none'
            })
          }
        }
      })
    },
    backPage() {
      uni.navigateBack()
    },
    // 获取余额
    getBalance() {
      const that = this
      request({
        url: 'notice/fyMoneyLog/getCountMoney',
        method: 'GET',
        data: {
          userId: that.userInfo.mid
        },
        success(res) {
          const result = res.data
          if (result.code == 200) {
            that.balance = result.data.balance
          }
        }
      })
    },
    // 获取提现记录
    getWithdrawalHistory() {
      const that = this
      request({
        url: 'notice/fyMoneyLog/getWithdrawal',
        method: 'GET',
        data: {userId: that.userInfo.mid},
        success(res) {
          const result = res.data
          if (result.code == 200) {
            that.withdrawalHistory = result.data
          }
        }
      })
    }
  },
  onLoad() {
	this.userInfo = uni.getStorageSync("userinfo");
	// const that = this;
	this.getBalance();
	this.getWithdrawalHistory();
  	// request({
  	// 	url:'notice/fyMoneyLog/getWithdrawal',
  	// 	method:'GET',
  	// 	data:{userId:that.userInfo.mid},
  	// 	success(res){
  	// 		// console.log(res);
  	// 		const result = res.data;
  	// 		if (result.code == 200){
  	// 			// console.log(result);
			// 	that.withdrawalHistory = result.data
  	// 		}
  	// 	}
  	// })
	// request({
	// 	url:'notice/fyMoneyLog/getCountMoney',
	// 	method:'GET',
	// 	data:{
	// 		userId:that.userInfo.mid
	// 	},
	// 	success(res){
	// 		// console.log(res);
	// 		const result = res.data;
	// 		if (result.code == 200){
	// 			// console.log(result)
	// 			that.balance = result.data.balance
	// 		}
	// 	}
	// })
  }
}
</script>

<style>
.withdrawal-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #1e90ff;
  color: white;
  padding: 0 15px;
  position: relative;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

.menu-icons {
  display: flex;
  align-items: center;
}

.dots {
  font-size: 20px;
  margin-right: 10px;
}

.circle {
  font-size: 22px;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 10px;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.balance-label {
  font-size: 16px;
  color: #333;
}

.balance-amount {
  font-size: 18px;
  color: #ff4500;
  font-weight: 500;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
  position: relative;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.form-input, .dropdown-input {
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.currency-unit {
  position: absolute;
  right: 15px;
  top: 38px;
  color: #666;
}

.dropdown-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.placeholder {
  color: #999;
}

.dropdown-icon {
  color: #999;
}

.disclaimer {
  margin: 15px 0;
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

.submit-btn {
  background-color: #1e90ff;
  height: 45px;
  border-radius: 22.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}

/* 提现记录样式 */
.history-section {
  background-color: white;
  margin: 15px;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.history-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 15px;
}

.history-item {
  padding: 10px 0;
}

.item-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.item-title {
  font-size: 14px;
  color: #333;
}

.item-amount {
  font-size: 14px;
  color: #ff4500;
}

.item-details {
  display: flex;
  justify-content: space-between;
}

.item-date {
  font-size: 12px;
  color: #999;
}

.item-status {
  font-size: 12px;
}

.status-pending {
  color: #999;
}

.status-approved {
  color: #52c41a;
}

.status-rejected {
  color: #ff4d4f;
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 10px 0;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 15rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 5rpx; left: 30rpx;}	       
</style>

